<template>
  <div id="app">
    <el-container>
      <el-header>
        <tab-bar class="tabbar"></tab-bar>
      </el-header>
      <el-main>
        <router-view v-if="isRouterAlive" />
      </el-main>
      <el-footer>
        <bottom></bottom>
      </el-footer>
    </el-container>
    <!-- <tab-bar class="tabbar"></tab-bar>
    <router-view/>
    <bottom></bottom> -->
  </div>
</template>

<script>
import tabBar from './components/Tabbar.vue'
import bottom from './components/Bottom.vue'
export default {
  name: 'App',
  components: {
    tabBar,
    bottom
  },
  data(){
    return {
      isRouterAlive: true
    }
  },
  provide(){
    return {
      reload: this.reload
    }
  },
  mounted(){
    window.addEventListener('unload',this.saveState)
  },
  methods:{
    reload(){
      this.isRouterAlive = false
      this.$nextTick(function(){
        this.isRouterAlive = true
      })
    },
    saveState(){
      window.sessionStorage.setItem('state',JSON.stringify(this.$store.state))
    }
  }
}
</script>

<style scoped>

  .el-header,.el-main,.el-footer {
    padding: 0;
  }
</style>>

</style>
